<template>
  <div class="tree">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content">
          <el-input
            style="margin-bottom:10px;"
            placeholder="搜索用户"
            v-model="filterText">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-tree
            :data="groupData"
            show-checkbox
            node-key="d_id"
            ref="tree2"
            @check="choose"
            highlight-current
            :filter-node-method="filterNode"
            :props="defaultProps"

          >
          </el-tree>
        </div>
      </el-col>

      <el-col :span="16">
        <div class="grid-content">
          <!-- <span class="fr" style="cursor:pointer" @click="clear">清空</span> -->
          <h5>{{title}}人数共计{{members.length}}人</h5>
          <el-row :gutter="20" class="gao">
            <el-col :span="6" v-for="(item,index) in members" :key='index'>
              <div class="grid-content bg-purple">{{item.name}}
                <!-- <i class="el-icon-close fr" @click="del(item.d_id)"></i> -->
              </div>
            </el-col>

          </el-row>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "TTree",
    props: ['title', 'groupData'],
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },
    data() {
      return {
        filterText: '',
        total: 120,
        members: [],
        qingkong: "",
        data2: [{
          id: 1,
          label: '全部',
          children: [{
            id: 4,
            label: '张三',
          }, {
            id: 5,
            label: '李四',
          }, {
            id: 6,
            label: '王五',
          }, {
            id: 7,
            label: '赵六',
          }, {
            id: 8,
            label: '小七'
          }]
        }, {
          id: 2,
          label: '群组1',
          children: [{
            id: 5,
            label: '李四'
          }, {
            id: 6,
            label: '王五'
          }]
        }, {
          id: 3,
          label: '群组2',
          children: [{
            id: 7,
            label: '赵六'
          }, {
            id: 8,
            label: '小七'
          }]
        }],
        defaultProps: {
          children: 'users',
          label: 'name'
        }
      }
    },
    created() {

    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      choose(a, b) {


        var arr = b.checkedNodes

        var temparr = []
        for (var i of arr) {
          if (!i.users) {
            temparr.push(i)
          }
        }

        var json = {};
        temparr.concat(this.members)
        this.members = []
        for (var i = 0; i < temparr.length; i++) {
          if (!json[temparr[i].d_id]) {
            this.members.push(temparr[i]);
            json[temparr[i].d_id] = 1;
          }
        }
      },
      clear() {
        this.qingkong = 1;
        this.members = []

        this.$refs.tree2.setCheckedKeys([]);


      },
      del(id) {
        for (var i = 0; i < this.members.length; i++) {

          if (id == this.members[i].d_id) {

            this.members.splice(i, 1)
          }

        }

        this.$refs.tree2.setChecked(id, false)
      }
    }
  }
</script>

<style scoped>
  .gao {
    height: 270px;
    overflow-y: scroll;
  }

  .el-tree {
    /* max-height:100px; */
    overflow-y: scroll;
    border-top: 1px solid #dddddd;

  }

  .bg-purple {
    background-color: #f0f0f0;
    border-radius: 2px;
    border: solid 1px #dddddd;
    margin: 4px 0px;
    padding: 0px 6px;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    margin-right: 10px;
  }

  .bg-purple .el-icon-close {
    position: relative;
    top: 10px;

  }
</style>
